<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>state</title>
    <style>

    </style>
</head>
<body>
<!--准备好一个容器-->
<div id="root"></div>

<!--引入React核心库-->
<script type="text/javascript" src="../0-ReactJs-v16.14.0/react.development.js"></script>
<!--引入React-Dom，用于支持React操作Dom-->
<script type="text/javascript" src="../0-ReactJs-v16.14.0/react-dom.development.js"></script>
<!--引入babel，用于将jsx转为js-->
<script type="text/javascript" src="../0-ReactJs-v16.14.0/babel.min.js"></script>

<script type="text/babel">
    //1.创建类式组件（三大属性只对类式组件）
    class Weather extends React.Component {

        //构造器调用几次？—— 1次
        constructor(props) {
            super(props);
            this.state = {
                isHot: true
            }
            //解决changeWeather中this指向问题
            this.changeWeather = this.changeWeather.bind(this);
        }

        //构造器调用几次？—— 1+n次，1是初始化的那一次 n是状态更新的次数
        render() {
            // const {isHot} = this.state;
            return (
                // <h1>今天天气很{isHot ? '炎热' : '凉爽'}</h1>
                <h1 onClick={this.changeWeather}>今天天气很{this.state.isHot ? '炎热' : '凉爽'}</h1>
            )
        }

        //changeWeather调用几次？—— n次，点击几次调用几次
        changeWeather() {
            // changeWeather放在哪里？—— Weather的原型对象上，供实例使用
            // 由于changeWeather时作为onClick的回调，所以不是通过实例调用的，是直接调用
            // 类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefined

            //严重注意：状态不可直接修改，需借助this.setState()
            this.setState({
                isHot: !this.state.isHot
            })
        }
    }

    //2.渲染组件到页面
    ReactDOM.render(<Weather/>, document.getElementById('root'));
    /*
        执行了ReactDOM.render(<Demo/>……之后，发生了什么？
            1.React解析组件标签，找到了Demo组件。
            2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。
            3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。
     */

</script>

</body>


</html>
